<template>
<div>
  <van-nav-bar
  title="黑马头条-登录"
/>
  <div>
    <!-- van-form整体表格组件
      @submit 自定义事件（提交事件）
      v-anfiel input输入框
      1.name属性 表单整体提交时，默认收集一个提交对象
      往后台发送的参数名就是name值
      {'用户名'：'页面值'}
      2.label属性 输入框左侧文本
      3.rules 属性配置校验规则
      :属性名="表达式"
      属性名="字符串"
    -->
    <van-form @submit="onSubmit">
  <van-field
    v-model="user.mobile"
    name="mobile"
    label="手机号"
    placeholder="请输入11位手机号"
    required
    :rules="[{ required: true, pattern: /^1[3-9]\d{9}$/, message: '请填写手机号' }]"
  />
  <van-field
    v-model="user.code"
    type="password"
    name="code"
    label="密码"
    placeholder="请输入密码"
    required
    :rules="[{ required: true, pattern: /^\d{6}$/,message: '请填写密码' }]"
  />
  <div style="margin: 16px;">
    <van-button
    round
    block
    type="info"
    native-type="submit"
    :loading="isLoading"
    loading-text="正在登录中..."
    :disabled="isLoading"
    >登录</van-button>
  </div>
</van-form>
  </div>
</div>
</template>

<script>
// 写需求套路
// 1.html+css
// 2.数据铺设，数据绑定
// 3.js交互 -> 事件/正则
// 组件使用套路
// 找组件,引组件,用组件(标签和js复制),读,删,改,加

// 目标1: 实现顶部导航->自定义样式
// 目标2: 实现表单组件->读,改,加
// 目标3: 收集值以后，调用接口->查看登陆结果
// 目标4： 点击登录给用户提示加载 按钮禁用
import { getLoginAPI } from '@/api'
import Notify from '@/ui/Notify'
import { setToken } from '@/utils/token'
import { setStorage } from '@/utils/storage'
export default {
  name: 'LoginIndex',
  data () {
    return {
      user: {
        mobile: '', // 手机号
        code: '' // 验证码(密码-246810 后台规定,无论手机号是什么)
      },
      isLoading: false // 登录时加载状态
    }
  },
  methods: {
    // 提交from表单
    async onSubmit (values) {
      // console.log('submit', values)
      // 登录加载状态设置true
      this.isLoading = true
      try {
        const res = await getLoginAPI(values)
        console.log('aaaaa', res)
        Notify({ type: 'success', message: '登录成功啦!!!' })
        setToken(res.data.data.token)
        // 跳转一定要写在最后 -> 尽量最后执行
        setStorage('refresh_token', res.data.data.refresh_token)
        // this.$router.push() 压栈（会产生历史记录 可回退） this.$router.replace() 替换（不会产生历史记录）
        this.$router.replace({
          path: this.$route.query.path || '/layout/home' // 因为路由规则里layout没有重定向，所以路径直接在这里写全
        })
      } catch (err) {
        // Promise内ajax抛出错误，直接进入这里
        Notify({ type: 'warning', message: '账号或密码错误' })
      }
      this.isLoading = false // 网络请求完成无论成功失败。都关闭加载状态
    }
  }
}
</script>

<style scoped lang="less">
  /* 此类目是 van-nav-bar 根标签 */
  // .van-nav-bar{
    // background-color: #007bff;
  // }
  // 此选择器名字是 van-nav-bar组件内的标签
  // scoped尝试把选择器属性匹配当前页面标签（选不中组件内部的）
  //  deep 会把属性选择器加到前面。（用后代选择器的方式往里找 匹配的类名）
  // 结论：要修改组件内样式。如果用了scoped 就要在属性选择器前加 /deep/
  // /deep/ .van-nav-bar__title{
  //   color: #fff;
  // }
</style>
